<template>
	<view class="addGoodsBox">
		<view class="addGoods">
			<view class="info">
				<picker range-key="name" :range="data.sellTypeList" @change="sellChange">
					<view class="infoTop select">
						<text class="certainly">需求方式</text>
						<text>{{data.obj.sellType == 'OFFLINE'?'线下':'线上'}}</text>
						<image src="/static/img/index/25.png" mode="widthFix"></image>
					</view>
				</picker>
				<view class="input">
					<text class="certainly">标题</text>
					<input v-model="data.obj.title" type="text" placeholder="请输入标题" />
				</view>
				<view class="imgs">
					<view class="top">
						图片
						<text>({{data.obj.attachmentIds.length}}/3)</text>
					</view>
					<view class="list">
						<view class="listItemImg" :key="index" v-for="(item,index) in data.obj.attachmentIds">
							<image :src="data.httpUrl+'/app/file/viewFile?fileId='+item" mode="aspectFill"></image>
							<image @tap="data.obj.attachmentIds.splice(index,1)" src="/static/img/ccc.png"
								mode="widthFix">
							</image>
						</view>

						<view v-if="data.obj.attachmentIds.length<3" class="zanwu" @click="uploadImg">
							<image src="/static/img/index/53.png" mode="widthFix"></image>
							上传图片
						</view>
					</view>
				</view>
				<view class="view">
					<view class="input">
						<text class="">数量</text>
						<view class="right">
							<image v-if="data.obj.number != 0" @tap="handeClick(0)" src="/static/img/index/160.png"
								mode="widthFix"></image>
					
							<text>{{data.obj.number}}</text>
							<image @tap="handeClick(1)" src="/static/img/index/159.png" mode="widthFix"></image>
					
						</view>
					</view>
					<view class="input">
						<text class="">单位</text>
						<input v-model="data.obj.pricingUnit" type="text" placeholder="请输入" />
					</view>
				</view>
				<view class="input">
					<text class="certainly">悬赏价格</text>
					<input v-model="data.obj.price" type="number" placeholder="请输入" />
				</view>
			
				<view class="select" @tap="data.show = true">
					<text class="certainly">时间</text>
					<text>{{data.obj.serviceTime || '请选择时间'}}</text>
					<image src="/static/img/index/25.png" mode="widthFix"></image>
				</view>
				<view class="select" @tap="changeAddress">
					<text class="certainly">需求地址</text>
					<text>{{data.obj.address || '请选择地址'}}</text>
					<image src="/static/img/index/25.png" mode="widthFix"></image>
				</view>
				<view class="input">
					<text>需求描述</text>
					<input v-model="data.obj.content" type="text" placeholder="请输入需求描述" />
				</view>
			</view>
			<u-datetime-picker @cancel="data.show = false" @confirm="confirm" hasInput :show="data.show" mode="datetime"
				v-model="data.serviceTime"></u-datetime-picker>
			<view class="bot">
				<text @tap="openswitch">切换</text>
				<text @tap="submit(0)">存草稿</text>
				<text @tap="submit(1)">发布上架</text>
			</view>

		</view>
	</view>
</template>

<script lang="ts" setup>
	import imgUpload from '@/utils/imgUpload.ts'
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue'
	import { releaseVpsDemand, getVpsDemandItem,storeHasStore } from '@/utils/api/map'
	import {
		reactive,
	} from 'vue';
	import { setDialogView } from '@/utils/dialogView.ts'
	const data = reactive<any>({
		httpUrl: getApp().globalData.baseUrl,
		serviceTime: new Date().getTime(),
		obj: { attachmentIds: [], sellType: 'OFFLINE', price: 0, number: 0 },
		sellTypeList: [{ id: 'OFFLINE', name: '线下' }, { id: 'ONLINE', name: '线上' }],
	})
	onLoad(({ id }) => {
		data.id = id;
		if (id) {
			uni.setNavigationBarTitle({
				title: '编辑需求'
			})
			getVpsDemandItem({ data: { id } }).then((res) => {
				if (res.data.attachmentIds) {
					res.data.attachmentIds = res.data.attachmentIds.split(',')
				}
				data.obj = res.data;
			})
		}
	})

	const openswitch = _ => {
			uni.showActionSheet({
				itemList: ['发墙墙', '需求(买方)','发布赚钱'],
				success: (e) => {
					if (e.tapIndex == 0) {
						uni.navigateTo({
							url: '/pages/release/release'
						})
					} else if(e.tapIndex == 1){
						uni.navigateTo({
							url: '/pages/releaseRequirements/index'
						})
					}else{
						storeHasStore().then((res) => {
							if(res.data){
								uni.navigateTo({
									url: '/pages/addGoods/index'
								})
							}else{
								uni.navigateTo({
									url: '/pages/makeMoney/index'
								})
							}
						})
					}
				}
			})
		}

	const timestampToTime = (timestamp) => {
		var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
		var Y = date.getFullYear() + '-';
		var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
		var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
		var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
		var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
		return Y + M + D + h + m;
	}
	const confirm = (e) => {
		data.obj.serviceTime = timestampToTime(e.value);
		data.serviceTime = e.value;
		data.show = false;
	}
	const changeAddress = () => {
		uni.chooseLocation({
			success: (e) => {
				data.obj.longitude = e.longitude;
				data.obj.latitude = e.latitude;
				data.obj.address = e.address;
			},
		})
	}
	const handeClick = (i) => {
		if (!i) {
			if (data.obj.number > 0) {
				data.obj.number = data.obj.number * 1 - 1;
			}
		} else {
			data.obj.number += 1;
		}
	}
	const sellChange = (e) => {
		data.obj.sellType = data.sellTypeList[e.detail.value].id;
	}
	const submit = (i) => {
		if (!data.obj.title) {
			uni.showToast({
				title: '请输入标题!',
				icon: 'none'
			})
			return;
		}
		if (!data.obj.price) {
			uni.showToast({
				title: '请输入悬赏价格!',
				icon: 'none'
			})
			return;
		}
		if (!data.obj.serviceTime) {
			uni.showToast({
				title: '请选择时间!',
				icon: 'none'
			})
			return;
		}
		if (!data.obj.address) {
			uni.showToast({
				title: '请选择地址!',
				icon: 'none'
			})
			return;
		}
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		console.log({ id: data.id, appVpsDemand: { ...data.obj, attachmentIds: data.obj.attachmentIds.join(','), state: i ? 'SHOW' : 'HIDE' } })
		releaseVpsDemand({ data: { id: data.id, appVpsDemand: { ...data.obj, attachmentIds: data.obj.attachmentIds.join(','), state: i ? 'SHOW' : 'HIDE' } } }).then((res) => {
			if (res.code == 200) {
				uni.showToast({
					title: data.id ? '编辑成功!' : '添加成功!',
					icon: 'none'
				})
				setTimeout(() => {
					uni.$emit('myNeeds')
					uni.navigateBack()
				}, 1000)
			}
		})
	}
	const uploadImg = () => {
		uni.showActionSheet({
			itemList:['拍摄','从相册选择'],
			success:(e)=>{
				let key = ''
				if(e.tapIndex == 0){
					key = 'camera'
				}else{
					key = 'album'
				}
				setDialogView(key == 'camera'?'CAMERA':'READ_EXTERNAL_STORAGE').then(res=>{
					if(res == 1){
						uni.chooseImage({
							count: 3 - data.obj.attachmentIds.length,
							sourceType: [key],
							success: (e : any) => {
								imgUpload(e.tempFiles.map((item : any) => { return { ...item, filePath: item.path } }), (e : any) => {
									data.obj.attachmentIds = [...data.obj.attachmentIds, ...e.map((item : any) => { return item.fileId })];
								})
						
							}
						})
					}
				})
				
			}
		})
		
	}
</script>

<style lang="scss">
	.addGoodsBox{
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding-top: var(--status-bar-height);
	}
	.addGoods {
		flex:1;
		display: flex;
		flex-direction: column;
		overflow: auto;
		padding: 0 24rpx 45rpx 24rpx;

		>.bot {
			display: flex;

			text {
				line-height: 88rpx;
				text-align: center;
				border-radius: 88rpx;
				font-size: 32rpx;
				color: #262626;
				font-weight: bold;
			}
			text:nth-of-type(1) {
				color: #595959;
				width: 160rpx;
				background: #e5e5ff;
			}
			text:nth-of-type(2) {
				color: #595959;
				width: 238rpx;
				margin-left: 20rpx;
				background: #E4E2FC;
				box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(107, 100, 211, 0.1);
				color: #6B64D3;
			}

			text:nth-of-type(3) {
				color: #fff;
				flex: 1;
				margin-left: 20rpx;
				background: #6B64D3;
			}
		}

		.info {
			flex: 1;
			height: 0;
			overflow: auto;
			.certainly {
				&:before {
					content: '*';
					display: inline-block;
					color: #FF263F;
					margin-right: 5rpx;
				}
			}
			.view{
				display: flex;
				justify-content: space-between;
				.input{
					width:48%;
				}
				>view:nth-of-type(2){
					margin-top: 0;
				}
			}
			.input {
				padding: 24rpx 32rpx;
				display: flex;
				border-radius: 24rpx;
				background: #F4F6FA;
				align-items: center;
				margin-top: 24rpx;

				text {
					width: 150rpx;
					color: #262626;
					display: flex;
					align-items: center;

				}

				.right {
					flex: 1;

					display: flex;
					align-items: center;
					justify-content: flex-end;

					image {
						width: 40rpx;
					}

					text {
						margin: 0 20rpx;
						width: fit-content;
					}

					input {
						width: 100rpx;
						height: 56rpx;
						text-align: center;
						background: #F5F5F5;
						margin: 0 20rpx;
					}
				}

				input {
					flex: 1;
				}

				image {
					width: 32rpx;
				}
			}

			.switch {
				padding: 24rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 24rpx;
				background: #F4F6FA;
				margin-top: 24rpx;
			}

			.select {
				padding: 24rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 24rpx;
				background: #F4F6FA;
				margin-top: 24rpx;

				>text:nth-of-type(1) {
					width: 150rpx;
					color: #262626;
					display: flex;
					align-items: center;

				}

				>text:nth-of-type(2) {
					flex: 1;
					color: #262626;
				}

				image {
					width: 25rpx;
				}
			}

			.view {
				padding: 24rpx 32rpx;
				border-radius: 24rpx;
				background: #F4F6FA;
				margin-top: 24rpx;

				.input {
					padding: 0 !important;
				}

				>view {
					margin-top: 40rpx;
					display: flex;
					align-items: center;

					>text:nth-of-type(1) {
						width: 150rpx;
						color: #262626;
						display: flex;
						align-items: center;

					}

					>text:nth-of-type(2) {
						flex: 1;
						color: #262626;
					}
				}

				>view:nth-of-type(1) {
					margin-top: 0;
				}

			}

			.imgs {
				.top {
					margin: 16rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #595959;

					text {
						color: #595959;
					}
				}

				.list {
					display: flex;
					flex-wrap: wrap;

					.listItemImg {
						width: 128rpx;
						height: 128rpx;
						border-radius: 16rpx;
						margin-right: 16rpx;
						position: relative;

						>image:nth-of-type(1) {
							width: 128rpx;
							height: 128rpx;
							border-radius: 16rpx;
						}

						>image:nth-of-type(2) {
							width: 40rpx;
							position: absolute;
							right: -10rpx;
							top: -10rpx;
							z-index: 9;
						}
					}


					.zanwu {
						margin-right: 16rpx;
						width: 128rpx;
						height: 128rpx;
						border-radius: 16rpx;
						background: #F4F6FA;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						color: #C4C4C4;
						font-size: 15rpx;

						image {
							width: 46rpx;
							margin-bottom: 5rpx;
						}
					}
				}
			}

			.input1 {
				padding: 24rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 24rpx;
				background: #F4F6FA;
				margin-top: 24rpx;

				text {
					width: 150rpx;
					color: #262626;
					display: flex;
					align-items: center;

				}

				input {
					flex: 1;
				}

				.right {
					padding: 8rpx 12rpx;
					border-radius: 16rpx;
					background: #fff;
					color: #6B64D3;
				}
			}

			.genduo {
				display: flex;
				color: #FF8C00;
				margin-top: 8rpx;

				image {
					width: 36rpx;
				}
			}
		}
	}

	.head-top {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		height: 88rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		position: relative;

		image {
			width: 36rpx;
			height: 36rpx;
		}

		.title {
			width: 100%;
			flex: 1;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 32rpx;
			color: #333333;
			line-height: 48rpx;
			// text-align: center;
			font-style: normal;
			text-transform: none;
			margin-left: 269rpx;

		}

		.head-btn {
			padding: 8rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 4rpx;
			}
		}

		.head-card {
			position: absolute;
			top: 50rpx;
			right: 0rpx;
			width: 230rpx;
			z-index: 1000;

			.card-item {
				padding: 10rpx 0;
				border-bottom: 1rpx solid #E5E5E5;
			}

			.card-item:last-child {
				border-bottom: none
			}
		}

	}
</style>